<template>
    <div id="videos">
        <el-row>
            <el-col :span="20" :offset="2">
                <el-row>
                    <el-col :span="6" v-for="(card, index) in videosData" :key="index">
                        <el-card class="video-card">
                            <div @click="showVideo(card)">
                                <img :src="card.img" alt="" width="100%" class="poster">
                                <div class="cadr-name">{{card.name}}</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog :title="videoTitle" :visible.sync="dialogVisible" @close="dialogClose" :close-on-click-modal="false" :center="true">
            <video-player class="video-player-box vjs-custom-skin" ref="videoPlayer" :options="playerOptions" :playsinline="true">
            </video-player>
        </el-dialog>
    </div>
</template>
<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import videosData from '@/assets/videoData.json'

export default {
    data: function() {
        return {
            videosData: videosData,
            dialogVisible: false,
            playerOptions: {
                language: 'zh',
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [{
	                type: "video/mp4",
	                src: ''
            	}],
                poster: "",
                preload: 'none'
            },
            videoTitle: ''
        }
    },
    components: {
        videoPlayer
    },
    methods: {
        showVideo: function(video) {
            this.playerOptions.sources[0].src = video.url;
            this.playerOptions.poster = video.img;
            this.videoTitle = video.name;
            this.dialogVisible = true;
        },
        dialogClose: function() {
            this.dialogVisible = false;
            this.$refs.videoPlayer.player.pause();
        }
    }
}

</script>
<style scoped>
.video-card {
    margin: 10px;
    cursor: pointer;
    transition: all .5s linear;
}

.video-card:hover {
    background-color: rgba(0, 0, 0, .4);
    transform: scale(1.02);
}

.cadr-name {
    font-size: 12px;
    text-align: center;
    transition: all .5s linear;
}
.video-card:hover .cadr-name{
	color: #fff;
}
.vjs-custom-skin{
	min-height: 480px;
}
</style>
